<script lang="ts" setup>
import { VueDraggable } from 'vue-draggable-plus'
import Calendar from '@/views/education/student/components/Calendar.vue'

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => [],
})

const emits = defineEmits(['update:modelValue'])

interface Props {
  modelValue: Array<Date>
}

const list = ref<Array<Date>>([])

watch(() => props.modelValue, (val, oldVal) => {
  if (val !== oldVal) {
    list.value = props.modelValue
  }
})

watch(list, (val) => {
  emits('update:modelValue', val)
}, { deep: true })

const clear = () => {
  list.value = []
}

const currentDate = ref(new Date())

const monthChange = (val: Date) => {
  currentDate.value = val
}

const isCurrentMonth = (date) => {
  return date.getMonth() === currentDate.value.getMonth()
}

const isToday = (date) => {
  const date1 = new Date()
  return date1.getFullYear() === date.getFullYear() && date1.getMonth() === date.getMonth() && date1.getDate() === date.getDate()
}

const dateCompare = (date: Date) => {
  const item: Array<any> = list.value.filter(item => item.getFullYear() === date.getFullYear()
    && item.getMonth() === date.getMonth() && item.getDate() === date.getDate())
  if (item.length) {
    return list.value.findIndex(i => i === item[0])
  }
  return -1
}

const remove = (date: Date) => {
  const index = dateCompare(date)
  if (index !== -1) {
    list.value.splice(index, 1)
  }
}

const itemClick = (item: Date) => {
  currentDate.value = item
  const index = dateCompare(item)
  if (index === -1) {
    list.value.push(item)
  } else {
    list.value.splice(index, 1)
  }
}
</script>

<template>
  <div class="class-calender">
    <div class="left">
      <Calendar mode="month" :show-toggle="false" @month-change="monthChange">
        <template #default="item">
          <div class="cell" :class="{ active: dateCompare(item.date) !== -1 }" @click="itemClick(item.date)">
            <img v-if="dateCompare(item.date) !== -1" src="@/assets/images/checked_badge.png" class="badge">
            <div :class="{ today: isToday(item.date), disabled: !isCurrentMonth(item.date) && dateCompare(item.date) === -1 }">
              {{ item.date.getDate() }}
            </div>
            <div v-if="dateCompare(item.date) !== -1" class="times">
              第{{ dateCompare(item.date) + 1 }}次课
            </div>
          </div>
        </template>
      </Calendar>
    </div>
    <div class="class-list">
      <div class="header">
        <div class="left">
          <a-tooltip content="长按课次可拖拽排序">
            <icon-info-circle />
          </a-tooltip>
          <span class="tt">课次列表</span>
          <a-badge :count="list.length" />
        </div>
        <a-button type="text" size="small" @click="clear">
          <icon-delete />
          清空
        </a-button>
      </div>
      <div class="list">
        <VueDraggable v-model="list" :animation="500">
          <div
            v-for="(item, index) in list" :key="`${item.getFullYear()}-${item.getMonth()}-${item.getDate()}`"
            class="list-item"
          >
            <div class="title">
              第{{ index + 1 }}次课
            </div>
            <div class="time">
              {{ `${item.getFullYear()}-${item.getMonth() + 1}-${item.getDate()}` }}
            </div>
            <div class="icon" @click="remove(item)">
              <icon-close />
            </div>
          </div>
        </VueDraggable>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.class-calender {
  display: flex;
  gap: 20px;
  height: 100%;

  .left {
    width: 450px;

    .cell {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      user-select: none;
      position: relative;
      border-radius: 6px;
      overflow: hidden;

      .disabled {
        color: #ccc;
      }

      .badge {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 0px;
        top: 0px;
      }

      .times {
        margin-top: 5px;
        font-size: 11px;
        color: #2d5cf6;
      }

      .today {
        color: #2d5cf6;
      }
    }
  }

  .class-list {
    height: 100%;
    border: 1px solid rgb(225, 230, 239);
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      border-bottom: 1px solid rgb(225, 230, 239);
      .left {
        display: flex;
        align-items: center;
        .tt {
          margin: 0 5px;
        }
      }

      :deep(.arco-btn-size-small) {
        padding: 0;
      }
    }

    .list {
      flex: 1;
      overflow-y: auto;

      &-item {
        margin: 10px;
        background: rgba(80, 126, 247, 0.1);
        padding: 10px;
        border-radius: 8px;
        position: relative;

        .title {
          font-size: 14px;
          color: #111;
        }

        .time {
          font-size: 14px;
          color: #999;
        }

        .icon {
          padding: 5px;
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
          cursor: pointer;
          border-radius: 4px;

          &:hover {
            background: rgba(80, 126, 247, 0.15);
            color: #999;
          }
        }
      }
    }
  }
}

.active {
  color: #2d5cf6;
  background: rgba(45, 92, 246, 0.1);
}

:deep(.calendar-cell-item) {
  height: 42px;
  min-height: auto !important;
}

:deep(.calendar-table) {
  td {
    border: none !important;
    padding: 6px;
  }

  thead tr {
    border-bottom: 1px solid #e5e6ea;
  }
}
</style>
